<template>
    <section>
        <el-card class="search_card">
            <el-form :inline="true" class="search_box">
                <el-form-item label="搜索用户" class="el-form-item">
                    <el-input
                        placeholder="用户名/用户id/用户邮箱"
                        v-model="keyword"
                        @keyup.enter="search"
                        :disabled="loading"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" :disabled="keyword.trim() === '' && loading">
                        搜索
                    </el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <div class="user_card_container" v-loading="loading">
                <template v-if="userArr.length === 0">
                    <el-empty :image-size="200" />
                </template>
                <template v-else>
                    <user-card
                        v-for="item in userArr"
                        :userInfo="item"
                        :key="item.id"
                        @click="openDrawer(item.id as number)"
                    />
                </template>
            </div>
            <el-pagination
                v-model:current-page="pageNo"
                :page-sizes="[10, 20, 30, 40]"
                v-model:page-size="limit"
                layout="prev,pager,next,jumper,->,sizes,total"
                :total="total"
                background
                @current-change="getUserList"
                @size-change="handler"
            ></el-pagination>
        </el-card>
        <user-drawer v-model:visible="visible" :userId="curUserId" />
    </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useLayOutSettingStore from "@/store/modules/setting";
import { ElMessage } from "element-plus";
// 引入接口
import { reqUserList } from "@/api/user";
// 引入用户卡片
import userCard from "./userCard.vue";
// 配置加载态
const loading = ref(false);
// 定义关键字
const keyword = ref("");
// 这个词表示获取当前结果时传入的关键字
const lastKeyword = ref("");
// 搜索方法
const search = () => {
    if (keyword.value.trim() === "") {
        ElMessage.error("关键字不能为空");
        return;
    }
    lastKeyword.value = keyword.value;
    getUserList();
};
// 重置按钮的回调
// 获取仓库
const settingStore = useLayOutSettingStore();
const reset = () => {
    settingStore.refresh = !settingStore.refresh;
};
// 配置分页器属性
const pageNo = ref<number>(1);
const limit = ref<number>(10);
const total = ref<number>(0);

// 存储全部用户的数组
// eslint-disable-next-line no-undef
const userArr = ref<User[]>([]);
// 获取课题列表
const getUserList = (pager = 1) => {
    loading.value = true;
    pageNo.value = pager;
    reqUserList({
        pageNo: pageNo.value,
        limit: limit.value,
        keyword: lastKeyword.value,
    })
        .then(
            // eslint-disable-next-line no-undef
            (res: ListResponseData<User>) => {
                if (res.code == 200 && typeof res.data == "object") {
                    total.value = res.data.total;
                    userArr.value = res.data.list;
                    console.log(res.data.list);
                }
            },
            (error) => {
                ElMessage.error(error.message);
            },
        )
        .finally(() => {
            loading.value = false;
        });
};
// 每页条目改变的时候进行的操作
const handler = () => {
    getUserList();
};
// 用户卡片的显示
const visible = ref<boolean>(false);
const curUserId = ref<number>(0);
// 点击用户卡片的回调
const openDrawer = (id: number) => {
    visible.value = true;
    curUserId.value = id;
};
</script>

<style lang="scss" scoped>
.el-card:first-child {
    margin-bottom: 10px;
}

.user_card_container {
    padding-bottom: 20px;

    display: flex;
    flex-wrap: wrap;

    :deep(.card) {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .el-empty {
        width: 100%;
    }
}
</style>
